<template>
    <div align="left" class="home-box min-height">
        <div style="">我是首页</div>
        <div>
           <div ref="hchart" style="width:50%; height:500px;"></div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import 'echarts/map/js/china'
    export default {
        name: 'HomeTone',
        data(){
            return {
              chart : null
            }
        },
        mounted(){
          this.initMap();
        },
        methods: {
            initMap(){
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(this.$refs.hchart);
              window.onresize = myChart.resize;
              let option = { 
                tooltip: { // 鼠标移到图里面的浮动提示框
                  // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
                  formatter (params) { 
                    // params.data 就是series配置项中的data数据遍历
                    let localValue,
                        perf,
                        downloadSpeep,
                        usability,
                        point
                    if (params.data) {
                      localValue = params.data.value
                      perf = params.data.perf
                      downloadSpeep = params.data.downloadSpeep
                      usability = params.data.usability
                      point = params.data.point
                    } else { // 为了防止没有定义数据的时候报错写的
                      localValue = 0
                      perf = 0
                      downloadSpeep = 0
                      usability = 0
                      point = 0
                    }
                    let htmlStr = `
                      <div style='font-size:12px;padding:5px 0 0 5px'> ${params.name}</div>
                      <div style='text-align:left; padding:5px 5px'>
                        区域对应数据：${localValue}<br/>
                        性能：${perf}<br/>
                        下载速度：${downloadSpeep}<br/>
                        可用性：${usability}<br/>
                        监测点数：${point}<br/>
                      </div>
                    `
                    return htmlStr
                  }
                  // backgroundColor:"#ff7f50",//提示标签背景颜色
                  // textStyle:{color:"#fff"} //提示标签字体颜色
                }, 
                // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
                visualMap: { // 左下角的颜色区域
                  type: 'piecewise', // 定义为分段型 visualMap
                  min: 0,
                  max: 1000,
                  itemWidth: 40,
                  bottom: 60,
                  left: 20,
                  pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
                    {gt: 900, lte: 1000, label: '非常好', color: '#6ad86e'}, // (900, 1000]
                    {gt: 500, lte: 900, label: '正常', color: '#9adcfa'}, // (500, 900]
                    {gt: 310, lte: 500, label: '警告', color: '#ffeb3b'}, // (310, 500]
                    {gt: 200, lte: 300, label: '较差', color: '#ff9800'}, // (200, 300]
                    {gt: 10, lte: 200, label: '非常差', color: 'orangered'}, // (10, 200]
                    {value: 0, label: '无数据', color: '#999'} // [0]
                  ]
                },
                // geo配置详解： https://echarts.baidu.com/option.html#geo
                geo: { // 地理坐标系组件用于地图的绘制
                  map: 'china', // 表示中国地图
                  // roam: true, // 是否开启鼠标缩放和平移漫游
                  zoom: 0.9, // 当前视角的缩放比例（地图的放大比例）
                  label: {
                    show: true
                  },
                  itemStyle: { // 地图区域的多边形 图形样式。
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    emphasis: { // 高亮状态下的多边形和标签样式
                      shadowBlur: 20,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                },
                series: [
                  {
                    name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
                    type: 'map',
                    geoIndex: 0,
                    label: {
                      show: true
                    },
                    // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
                    data: [{
                      'name': '北京',
                      'value': 599,
                      'perf': '0.501s', // 性能
                      'downloadSpeep': '1.221MB/s', // 下载速度
                      'usability': '100%', // 可用性
                      'point': '250' // 监测点
                    },
                    {
                      'name': '河南',
                      'value': 999,
                      'perf': '0.901s', // 性能
                      'downloadSpeep': '20.2MB/s', // 下载速度
                      'usability': '100%', // 可用性
                      'point': '200' // 监测点
                    }, 
                    {
                      'name': '上海',
                      'value': 142
                    }, 
                    {
                      'name': '黑龙江',
                      'value': 44
                    },
                    {
                      'name': '新疆',
                      'value': 999,
                      'perf': '0.501s', // 性能
                      'downloadSpeep': '1.221MB/s', // 下载速度
                      'usability': '100%', // 可用性
                      'point': '250' // 监测点
                    }, {
                      'name': '深圳',
                      'value': 92
                    }, {
                      'name': '湖北',
                      'value': 810
                    }, {
                      'name': '四川',
                      'value': 453
                    }]
                  }
                ]
              }
              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);
            }
        }
    }
</script>
<style scoped>
  .home-box{padding: 5px 20px;}
  .min-height{min-height: 900px;}
</style>